<template>
  <div class="vip-page">
    <user-card />
    <div class="privilege flex">
      <div class="card hover-shadow">
        <div class="title">30个/日</div>
        <div class="desc">
          普通会员每日可下载免费资源1个，VIP客户可下载 免费资源和VIP专项资源30个
        </div>
        <div class="no">01</div>
      </div>
      <div class="card hover-shadow">
        <div class="title">素材下载低至6折</div>
        <div class="desc">
          付费素材除享受常规折扣外，还可以享受超值VIP折 扣，真正的折上折优惠
        </div>
        <div class="no">02</div>
      </div>
      <div class="card hover-shadow">
        <div class="title">永久免费</div>
        <div class="desc">
          付费资源普通会员30天内重复下载免费，VIP客户重 复下载可永久免费
        </div>
        <div class="no">03</div>
      </div>
    </div>
    <div class="exclusive-card">
      <div class="zdy-nav flex align-center flex-between">
        <div class="left">
          <div class="flex">
            <div class="title">
              <span>VIP专享券</span>
              <div class="line"></div>
            </div>
          </div>
          <div class="desc">每月可领6张 每月1号零点更新</div>
        </div>
        <div class="right">
          <div class="price">¥780/年</div>
          <div class="desc">平均可省</div>
        </div>
      </div>
      <div class="coupons">
        <div class="coupons-card" v-for="item in info.list" :key="item.id">
          <img class="bg" src="@/assets/icon/user/vip/coupons.png" alt="" />
          <div class="con">
            <div class="label">牛牛币代金券</div>
            <div class="prices">
              <span>￥</span>
              <span>{{ item.money }}</span>
            </div>
            <div class="desc">
              满{{ item.satisfyMoney }}元可使用;自领取起有效期{{
                item.validDay
              }}天
            </div>
            <n-button
              style="
                --n-color: #1c1f2e;
                --n-color-hover: #1c1f2e;
                --n-color-focus: #1c1f2e;
                --n-color-pressed: #1c1f2e;
                --n-ripple-color: #1c1f2e;
                --n-border: 1px solid #1c1f2e;
                --n-border-hover: 1px solid #1c1f2e;
                --n-border-focus: 1px solid #1c1f2e;
                --n-border-pressed: 1px solid #1c1f2e;
              "
              type="primary"
              class="receive-btn"
              round
              @click="handLq(item)"
            >
              <span v-if="item.isCurrentGet">立即领取</span>
              <span v-else>已领取</span>
            </n-button>
          </div>
        </div>
      </div>
      <div class="zdy-nav flex align-center flex-between">
        <div class="left">
          <div class="flex">
            <div class="title">
              <span>付费模型重复下载免费</span>
              <div class="line"></div>
            </div>
          </div>
          <div class="desc">享受其他产品使用特权</div>
        </div>
        <div class="right">
          <div class="price">¥278/年</div>
          <div class="desc">平均可省</div>
        </div>
      </div>
      <div class="vip-free">
        <img class="bg" src="@/assets/icon/user/vip/free-bg.png" alt="" />
        <img class="no-vip" src="@/assets/icon/user/vip/no-vip.png" alt="" />
        <img
          class="vip-status"
          src="@/assets/icon/user/vip/vip-status.png"
          alt=""
        />
        <div class="row-free flex">
          <div class="row-free-left">
            <img src="@/assets/icon/user/vip/down-30.png" alt="" />
            <span>重复下载30天内免费</span>
          </div>
          <div class="row-free-right">
            <img src="@/assets/icon/user/vip/down-no.png" alt="" />
            <span>永久免费</span>
          </div>
        </div>
      </div>
      <div class="zdy-nav flex align-center flex-between">
        <div class="flex align-center">
          <div class="left">
            <div class="flex">
              <div class="title">
                <span>专属客服</span>
                <div class="line"></div>
              </div>
            </div>
            <div class="desc">享受一对一专线服务</div>
          </div>
          <img
            class="customer-img"
            src="@/assets/icon/user/vip/customer.png"
            alt=""
          />
        </div>
        <n-button
          style="
            --n-color: #1c1f2e;
            --n-color-hover: #1c1f2e;
            --n-color-focus: #1c1f2e;
            --n-color-pressed: #1c1f2e;
            --n-ripple-color: #1c1f2e;
            --n-border: 1px solid #1c1f2e;
            --n-border-hover: 1px solid #1c1f2e;
            --n-border-focus: 1px solid #1c1f2e;
            --n-border-pressed: 1px solid #1c1f2e;
          "
          type="primary"
          class="customer-btn"
          @click="handCall"
        >
          联系客服
        </n-button>
      </div>
    </div>
    <confirm-dia
      ref="confirmRef"
      title="确定要领取此优惠券吗？"
      @confirm="handConfirm"
    />
    <vip-dia ref="vipRef" />
  </div>
</template>
<script setup lang="ts">
import UserCard from './view/UserCard.vue'
import { defineAsyncComponent, onMounted, ref } from 'vue'
import VipDia from '@/components/VipDia.vue'
const ConfirmDia = defineAsyncComponent(
  () => import('@/components/ConfirmDia.vue')
)

let oldId = 0
const confirmRef = ref()
const vipRef = ref()
const handLq = (e: listItem) => {
  // if (userInfo.value.userType === 'COMMON') {
  //   toast.error('请先开通Vip')
  //   vipRef.value.open()
  //   return
  // }
  if (!e.isCurrentGet) return
  if (!info.value.isGet) return
  oldId = e.id
  confirmRef.value.open()
}
const handConfirm = async () => {
  // const { code, message } = await vipApi.save(oldId)
  // if (code !== 200) {
  //   toast.error(message)
  //   return
  // }
  msgUtil.$message.success('领取成功')
  const index = info.value.list.findIndex((el: listItem) => el.id === oldId)
  const item = info.value.list[index]
  item.isCurrentGet = false
  info.value.list[index] = item
}
const handCall = () => {
  window.open('https://work.weixin.qq.com/kfid/kfcef4738f1f5cc5358')
}
interface listItem {
  id: number
  money: number
  satisfyMoney: number
  isCurrentGet: boolean
  type: string
  validDay: number
  isEnable: boolean
  isReduction: boolean
}
interface infoState {
  isGet: boolean
  list: listItem[]
}
const info = ref<infoState>({
  isGet: false,
  list: []
})
const init = async () => {
  // const { data } = await vipApi.list()
  info.value = {
    isGet: false,
    list: [
      {
        id: 1,
        money: 10,
        satisfyMoney: 100,
        isCurrentGet: false,
        type: '1',
        validDay: 30,
        isEnable: false,
        isReduction: false
      }
    ]
  }
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.vip-page {
  .privilege {
    margin-top: 20px;
    gap: 0 20px;
    .card {
      flex: 1;
      background-color: #fff;
      border-radius: 12px;
      box-sizing: border-box;
      padding: 24px 24px 40px 24px;
      position: relative;
      cursor: pointer;
      .title {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
      }
      .desc {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
      .no {
        position: absolute;
        right: 24px;
        bottom: 10px;
        font-size: 30px;
        font-weight: 500;
        color: #f5f5f5;
      }
    }
  }
  .exclusive-card {
    margin-top: 15px;
    background-color: #fff;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 40px;
    position: relative;
    cursor: pointer;
    .zdy-nav {
      .left {
        .title {
          font-size: 30px;
          font-weight: 800;
          color: #2d2c26;
          position: relative;
          span {
            position: relative;
            z-index: 3;
          }
          .line {
            position: absolute;
            bottom: 8px;
            width: 100%;
            height: 16px;
            background: rgba(253, 217, 132, 0.8);
          }
        }
        .desc {
          margin-top: 8px;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
      }
      .right {
        background: linear-gradient(92deg, #1c1f2e 0%, #1c1f2e 100%);
        border-radius: 12px 12px 12px 30px;
        text-align: right;
        padding: 12px 20px;
        .price {
          font-size: 20px;
          font-weight: 500;
          color: #ffffff;
        }
        .desc {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .customer-img {
        width: 72px;
        height: 65px;
        display: block;
        margin-left: 22px;
      }
      .customer-btn {
        width: 220px;
        height: 68px;
        font-size: 20px;
        border-radius: 12px;
      }
    }
    .coupons {
      margin-top: 31px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding-bottom: 50px;
      .coupons-card {
        position: relative;
        .bg {
          width: 339px;
          height: 261px;
          display: block;
        }
        .con {
          position: absolute;
          z-index: 2;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          padding-top: 20px;
          .label {
            font-size: 18px;
            font-weight: bold;
            color: #e58f37;
          }
          .prices {
            background: linear-gradient(92deg, #ffc794 0%, #bb6a1a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            span {
              font-size: 38px;
              font-weight: bold;
              &:first-child {
                font-size: 24px;
              }
            }
          }
          .desc {
            margin-top: 22px;
            font-size: 14px;
            font-weight: 400;
            color: #b06e3f;
          }
          .receive-btn {
            margin-top: 35px;
            width: 299px;
            height: 44px;
            font-size: 16px;
          }
        }
      }
    }
    .vip-free {
      margin-top: 31px;
      position: relative;
      padding-bottom: 58px;
      .bg {
        width: 100%;
        height: 209px;
      }
      .no-vip {
        position: absolute;
        left: -5px;
        top: 24px;
        z-index: 2;
        width: 96px;
        height: 34px;
      }
      .vip-status {
        position: absolute;
        right: -11px;
        top: 24px;
        z-index: 2;
        width: 96px;
        height: 34px;
      }
      .row-free {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        &-left,
        &-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img {
            width: 82px;
            height: 55px;
            display: block;
          }
          span {
            margin-top: 18px;
            font-size: 18px;
            font-weight: bold;
            color: #9c6115;
          }
        }
      }
    }
  }
}
</style>
